import React, { useEffect, useState } from 'react';

import { history } from 'umi';
import AMapLoader from '@amap/amap-jsapi-loader';
import DetailStyle from './detailStyle.less';
import { PlusOutlined } from '@ant-design/icons';
import {
  Modal,
  Form,
  Input,
  Button,
  Radio,
  Select,
  Cascader,
  DatePicker,
  InputNumber,
  TreeSelect,
  Switch,
  Checkbox,
  Upload,
} from 'antd';
import { connect } from 'react-redux';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import { timestampToTime } from '@/untils';
import moment from 'moment';

const { RangePicker } = DatePicker;
const { TextArea } = Input;
const dateFormat = 'YYYY/MM/DD';

let map = null;
const { Search } = Input;
const { Option } = Select;
function addhouseresources(props: any) {
  const [form] = Form.useForm();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const onGenderChange = (value: string) => {
    switch (value) {
      case '海南':
        form.setFieldsValue({ note: '海南' });
        return;
      case '广东':
        form.setFieldsValue({ note: '广东' });
        return;
      case '北京':
        form.setFieldsValue({ note: '北京' });
    }
  };
  // editor 实例
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法

  // 编辑器内容
  const [html, setHtml] = useState('<p>hello</p>');

  // 模拟 ajax 请求，异步设置 html
  useEffect(() => {
    setTimeout(() => {
      setHtml('<p>hello world</p>');
    }, 1500);
  }, []);

  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
  // const toolbarConfig = { }                        // JS 语法

  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    // const editorConfig = {                         // JS 语法
    placeholder: '请输入内容...',
  };

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  useEffect(() => {
    AMapLoader.load({
      key: 'eed2e485513a38826d1e4512917fc5e0', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map('container', {
          // //设置地图容器id
          // viewMode: '3D', //是否为3D地图模式
          // zoom: 5, //初始化地图级别
          center: [105.602725, 37.076636], //初始化地图中心点位置
        });
      })
      .catch((e) => {
        console.log(e);
      });
  }, [isModalOpen]);

  const onSearch = (value: string) => {
    console.log(value);
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onFinish = (values: any) => {
    console.log('Success:', values);
    props.dispatch({ type: 'letsecond/ADD_SECOND', payload: { ...values } });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div>
      <h3>出租房添加房源</h3>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item
          style={{ width: '250px', marginLeft: '110px' }}
          label="所属区域"
          name="region"
          rules={[{ required: true, message: 'Please input your region!' }]}
        >
          <Select placeholder="请选择" onChange={onGenderChange} allowClear>
            <Option value="海南">海南</Option>
            <Option value="广东">广东</Option>
            <Option value="北京">北京</Option>
          </Select>
        </Form.Item>
        <div style={{ display: 'flex', justifyContent: 'space-around' }}>
          <Form.Item
            label="小区名称"
            name="estate_name"
            style={{ width: '350px', marginLeft: '120px' }}
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input placeholder="例:海秀路104号" />
          </Form.Item>
          <Form.Item
            label="总价"
            name="price"
            style={{ width: '250px', marginLeft: '100px' }}
            rules={[{ required: true, message: 'Please input your price!' }]}
          >
            <Input placeholder="30000" />
          </Form.Item>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-around' }}>
          <Form.Item
            label="标题"
            name="title"
            style={{ width: '250px', marginLeft: '100px' }}
            rules={[{ required: true, message: 'Please input your address!' }]}
          >
            <Input placeholder="例:海秀路104号" />
          </Form.Item>
          <Form.Item
            label="面积"
            name="acreage"
            style={{ width: '300px', marginRight: '-100px' }}
            rules={[{ required: true, message: 'Please input your address!' }]}
          >
            <Input placeholder="例:海秀路104号" />
          </Form.Item>
        </div>
        <Form.Item
          label="开盘时间"
          style={{ width: '250px', marginLeft: '115px' }}
          // name="opening_time"
          rules={[{ required: true, message: '1#,2#已开盘' }]}
        >
          <DatePicker placeholder="2016-10-22" />
        </Form.Item>
        <Form.Item
          label="售楼电话"
          name="sale_phone"
          style={{ width: '240px', marginLeft: '120px' }}
        >
          <Input placeholder="0898-32266803" />
        </Form.Item>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-around',
          }}
        >
          <Form.Item
            label="开发商"
            name="developer_name"
            style={{ width: '240px', marginLeft: '120px' }}
          >
            <Input placeholder="富力地产" />
          </Form.Item>
          <Form.Item label="标注位置">
            <Search
              style={{ width: '300px' }}
              placeholder="115.345,22.1349"
              enterButton="标注位置"
              onSearch={() => {
                setIsModalOpen(true);
              }}
            ></Search>
          </Form.Item>
        </div>
        <Form.Item label="缩略图" valuePropName="fileList">
          <Upload action="/upload.do" listType="picture-card">
            <div>
              <PlusOutlined />
              <div style={{ marginTop: 8 }}>上传图片</div>
            </div>
          </Upload>
        </Form.Item>
        <Form.Item label="楼盘介绍" name="introduce">
          <div
            style={{ border: '1px solid #ccc', zIndex: 100, width: '600px' }}
          >
            <Toolbar
              editor={editor}
              mode="default"
              style={{ borderBottom: '1px solid #ccc' }}
            />
            <Editor
              value={html}
              onCreated={setEditor}
              onChange={(editor) => setHtml(editor.getHtml())}
              mode="default"
              style={{ height: '300px', overflowY: 'hidden' }}
            />
          </div>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
      <Modal
        title="地图"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <div id="container" className="map" style={{ height: '400px' }}></div>
      </Modal>
    </div>
  );
}

export default connect()(addhouseresources);
